<template lang="pug">
  div().slide-show
    transition-group(tag="ul" name='image').slide-show-img
      li(v-for="(item,index) in items" :key="index" v-show='index===mark')
        img(:src='item.img' alt='小仙女')
    span.left-arrow(@click="lostImage()")
    span.right-arrow(@click="nextImage()")
    ul.location-bar
      li(v-for="(item,index) in items" :key="index" :class="{'location-li':index===mark}" @click="mark=index")
</template>

<script>
export default {
  name: 'carousel',
  data () {
    return {
      items: [
        {img: '../../../../static/img/carousel/PE1.jpg'},
        {img: '../../../../static/img/carousel/PE2.jpg'},
        {img: '../../../../static/img/carousel/PE3.jpg'},
        {img: '../../../../static/img/carousel/PE4.jpg'},
        {img: '../../../../static/img/carousel/PE5.jpg'}
      ],
      mark: 0,
      isShow: true
    }
  },
  methods: {
    lostImage () {
      this.mark--
      if (this.mark < 0) {
        this.mark = 4
      }
    },
    nextImage () {
      this.mark++
      if (this.mark > 4) {
        this.mark = 0
      }
    },
    play () {
      setInterval(() => {
        this.mark++
        if (this.mark === 4) {
          this.mark = 0
        }
      }, 3000)
    }
  },
  mounted () {
    this.play()
  }
}
</script>

<style scoped lang="stylus">
  .image-enter-active {
    transform: translateX(0);
    transition: all 1s ease;
  }
  .image-leave-active {
    transform: translateX(-100%);
    transition: all 1s ease;
  }
  .image-enter {
    transform: translateX(100%)
  }
  .image-leave {
    transform: translateX(0)
  }
  .slide-show
    width 550px
    height:310px
    display: inline-block
    overflow hidden
    position relative
    .slide-show-img
      li
        position absolute
        img
          width 550px
          height 310px
    .left-arrow
      cursor pointer
      display inline-block
      background url("../../../../static/img/login/arrow.png")
      position: absolute
      width 30px
      height 30px
      top:0
      bottom 0
      left 0
      margin auto 0
      transform rotate(90deg)
    .right-arrow
      cursor pointer
      display inline-block
      background url("../../../../static/img/login/arrow.png")
      position: absolute
      width 30px
      height 30px
      top:0
      bottom 0
      right 0
      margin auto 0
      transform rotate(-90deg)
    .location-bar
      position absolute
      bottom 0
      width 100%
      height: 50px
      background linear-gradient(transparent,black)
      display flex
      justify-content center
      align-items center
      li
        display inline-block
        width 10px
        height:10px
        background white
        border-radius 50%
        margin-right 10px
        cursor: pointer
      .location-li
        background grey
</style>
